<template>
  <div class="record-container">
    <!-- <h2 class="title">数据报表</h2> -->

    <!-- 类目 Tabs -->
    <div class="tabs">
      <button
        v-for="(c, idx) in categories"
        :key="c.key"
        :class="['tab-btn', { active: activeCategory === c.key }]"
        @click="selectCategory(c.key)"
      >
        {{ c.name }}
      </button>
    </div>

    <!-- 筛选控件 -->
    <el-card class="filter-card" style="margin-bottom: 12px">
      <el-form :inline="true" :model="filterParams" class="filter-form">
        <el-form-item label="载体">
          <el-select
            v-model="filterParams.zt"
            placeholder="请选择载体"
            clearable
            style="width: 200px"
          >
            <el-option label="联健元和" value="联健元和" />
            <el-option label="达博" value="达博" />
            <el-option label="科澜项目" value="科澜项目" />
            <el-option label="国科项目" value="国科项目" />
            <el-option label="黄埭项目" value="黄埭项目" />
            <el-option label="金扶梯" value="金扶梯" />
            <el-option label="北联新翼" value="北联新翼" />
            <el-option label="深圳项目" value="深圳项目" />
            <el-option label="西山项目" value="西山项目" />
            <el-option label="秦淮项目" value="秦淮项目" />
            <el-option label="双创中心" value="双创中心" />
            <el-option label="创界项目" value="创界项目" />
            <el-option label="江环项目" value="江环项目" />
            <el-option label="江北项目" value="江北项目" />
            <el-option label="拓展项目" value="拓展项目" />
            <el-option label="试点项目" value="试点项目" />
          </el-select>
        </el-form-item>
        <el-form-item label="年月">
          <el-date-picker
            v-model="filterParams.month"
            type="month"
            placeholder="请选择年月"
            format="YYYY年MM月"
            value-format="YYYY-MM"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">筛选</el-button>
          <el-button @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据看板 (cards) -->
    <div class="boards">
      <div
        v-for="item in currentCategory.items"
        :key="item.id"
        :class="['board', { selected: selectedBoardId === item.id }]"
        @click="selectBoard(item.id)"
      >
        <div class="board-top">
          <div class="board-title">{{ item.title }}</div>
          <div class="board-sub">{{ item.subtitle }}</div>
        </div>
        <div class="board-value">
          <div class="value">{{ item.value }}</div>
          <div class="unit">{{ item.unit }}</div>
        </div>
      </div>
    </div>

    <!-- 底部对应数据列表 -->
    <div class="list-area" v-if="selectedBoard">
      <h3 class="list-title">详细数据 — {{ selectedBoard.title }}</h3>

      <el-table :data="filteredListData" stripe style="width: 100%">
        <el-table-column prop="period" label="周期" width="160" />
        <el-table-column prop="metric" label="指标" />
        <el-table-column prop="amount" label="数值" width="160" />
        <el-table-column prop="note" label="备注" />
      </el-table>

      <div class="empty" v-if="filteredListData.length === 0">暂无数据</div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, computed, watch } from "vue";

/*
    基于截图构建的类目与数据维度示例。
    可按需扩展 items 数组或替换为真实接口数据。
*/

const categories = reactive([
  {
    key: "招商",
    name: "招商",
    items: [
      {
        id: "z1",
        title: "去化面积(m²)",
        subtitle: "扩租 / 新去化",
        value: "12,345",
        unit: "m²",
      },
      { id: "z2", title: "退租面积", subtitle: "", value: "2,100", unit: "m²" },
      { id: "z3", title: "续租面积", subtitle: "", value: "5,600", unit: "m²" },
      { id: "z4", title: "新增税源企业数", subtitle: "", value: "18", unit: "家" },
      { id: "z5", title: "客户资料完整度", subtitle: "", value: "88%", unit: "" },
      { id: "z6", title: "拜访数", subtitle: "", value: "120", unit: "次" },
    ],
  },
  {
    key: "运营财务",
    name: "运营 + 财务",
    items: [
      { id: "o1", title: "总租金指标", subtitle: "", value: "¥ 3,200,000", unit: "" },
      { id: "o2", title: "历史欠缴租金", subtitle: "", value: "¥ 120,000", unit: "" },
      { id: "o3", title: "历史欠缴租金回款率", subtitle: "", value: "38%", unit: "" },
      { id: "o4", title: "本月存量租金", subtitle: "", value: "¥ 1,050,000", unit: "" },
      { id: "o5", title: "本月存量租金回款率", subtitle: "", value: "91%", unit: "" },
      { id: "o6", title: "本月去化新增租金", subtitle: "", value: "¥ 80,000", unit: "" },
      { id: "o7", title: "本月去化新增租金达成率", subtitle: "", value: "72%", unit: "" },
      { id: "o8", title: "基础运营费(万)", subtitle: "", value: "12", unit: "万" },
      { id: "o9", title: "考核运营费(万)", subtitle: "", value: "8", unit: "万" },
      { id: "o10", title: "房租补贴(万)", subtitle: "", value: "5", unit: "万" },
      { id: "o11", title: "向上争取(万)", subtitle: "", value: "3", unit: "万" },
      { id: "o12", title: "增值服务(万)", subtitle: "", value: "6", unit: "万" },
    ],
  },
  {
    key: "科技指标",
    name: "科技指标",
    items: [
      { id: "t1", title: "人才-引进储备量", subtitle: "", value: "250", unit: "人" },
      { id: "t2", title: "人才-申报量", subtitle: "", value: "20", unit: "项" },
      { id: "t3", title: "人才-获批量", subtitle: "", value: "5", unit: "项" },
      { id: "t4", title: "高企-引进储备量", subtitle: "", value: "12", unit: "家" },
      { id: "t5", title: "高企-申报量", subtitle: "", value: "6", unit: "家" },
      {
        id: "t6",
        title: "高企-迁址量（直接是高企）",
        subtitle: "",
        value: "2",
        unit: "家",
      },
      { id: "t7", title: "高企-获批量", subtitle: "", value: "3", unit: "家" },
    ],
  },
  {
    key: "目标",
    name: "目标",
    items: [
      {
        id: "g1",
        title: "去化面积目标",
        subtitle: "年度/月度",
        value: "50,000",
        unit: "m²",
      },
      { id: "g2", title: "新增税源企业数", subtitle: "月度", value: "30", unit: "家" },
      { id: "g3", title: "税收", subtitle: "年度", value: "¥ 12,000,000", unit: "" },
    ],
  },
]);

const activeCategory = ref(categories[0].key);
const selectedBoardId = ref(categories[0].items[0].id);

// computed 当前类目和选中项
const currentCategory = computed(
  () => categories.find((c) => c.key === activeCategory.value) || categories[0]
);
const selectedBoard = computed(() => {
  return currentCategory.value.items.find((i) => i.id === selectedBoardId.value) || null;
});

// 列表表头与示例数据（可替换成接口返回数据）
const tableColumns = ["周期", "指标", "数值", "备注"];
// 筛选参数（载体与月份）
const filterParams = reactive({
  zt: "",
  month: getCurrentMonthForFilter(), // 默认当前月份 YYYY-MM
});

function getCurrentMonthForFilter() {
  const now = new Date();
  const y = now.getFullYear();
  const m = String(now.getMonth() + 1).padStart(2, "0");
  return `${y}-${m}`;
}

// 根据选中看板的 listData 进行过滤（按 month）
const filteredListData = computed(() => {
  const base = listData || [];
  if (!filterParams.month) return base;
  const target = String(filterParams.month); // 格式 YYYY-MM
  return base.filter((r) => {
    if (!r.period) return false;
    const p = String(r.period);
    // 支持多种 period 格式：YYYY-MM, YYYY-MM-DD, YYYY年MM月, YYYY-Qn, YYYY-年度
    if (p.startsWith(target)) return true; // 例如 "2025-11"
    if (p.indexOf(target) !== -1) return true;
    // 兼容 "YYYY年MM月" 格式
    const year = target.slice(0, 4);
    const month = target.slice(5, 7);
    if (p.indexOf(`${year}年${parseInt(month, 10)}月`) !== -1) return true;
    if (p.indexOf(`${year}年${month}月`) !== -1) return true;
    return false;
  });
});
const listDataMap = reactive({
  z1: [
    { id: 1, period: "2025-01", metric: "去化面积", amount: "1,200 m²", note: "" },
    { id: 2, period: "2025-02", metric: "去化面积", amount: "1,800 m²", note: "" },
  ],
  z4: [{ id: 1, period: "2025-01", metric: "新增税源", amount: "3 家", note: "" }],
  z6: [
    {
      id: 1,
      period: "2025-11",
      metric: "拜访数",
      amount: "120 次",
      note: "本月拜访次数",
    },
  ],
  o1: [
    {
      id: 1,
      period: "2025-Q1",
      metric: "总租金",
      amount: "¥ 800,000",
      note: "目标进度 25%",
    },
  ],
  o2: [
    {
      id: 1,
      period: "2025-01",
      metric: "历史欠缴租金",
      amount: "¥ 120,000",
      note: "含多期欠款",
    },
  ],
  o3: [
    {
      id: 1,
      period: "2025-01",
      metric: "历史欠缴租金回款率",
      amount: "38%",
      note: "累计回款比例",
    },
  ],
  o4: [
    {
      id: 1,
      period: "2025-11",
      metric: "本月存量租金",
      amount: "¥ 1,050,000",
      note: "含当期与挂账",
    },
  ],
  o5: [
    {
      id: 1,
      period: "2025-11",
      metric: "本月存量租金回款率",
      amount: "91%",
      note: "当月到账比例",
    },
  ],
  o6: [
    {
      id: 1,
      period: "2025-11",
      metric: "本月去化新增租金",
      amount: "¥ 80,000",
      note: "新增签约产生",
    },
  ],
  o7: [
    {
      id: 1,
      period: "2025-11",
      metric: "本月去化新增租金达成率",
      amount: "72%",
      note: "对当月目标的完成度",
    },
  ],
  o8: [
    {
      id: 1,
      period: "2025-年度",
      metric: "基础运营费",
      amount: "12 万",
      note: "年度预算",
    },
  ],
  o9: [
    {
      id: 1,
      period: "2025-年度",
      metric: "考核运营费",
      amount: "8 万",
      note: "绩效相关",
    },
  ],
  o10: [
    {
      id: 1,
      period: "2025-11",
      metric: "房租补贴",
      amount: "5 万",
      note: "本月补贴总额",
    },
  ],
  o11: [
    {
      id: 1,
      period: "2025-11",
      metric: "向上争取",
      amount: "3 万",
      note: "争取到的专项资金",
    },
  ],
  o12: [
    { id: 1, period: "2025-11", metric: "增值服务", amount: "6 万", note: "服务类收入" },
  ],
  t1: [{ id: 1, period: "2025-01", metric: "人才储备", amount: "20 人", note: "" }],
  t2: [
    { id: 1, period: "2025-01", metric: "人才申报", amount: "8 项", note: "本月申报" },
  ],
  t3: [
    { id: 1, period: "2025-01", metric: "人才获批", amount: "2 项", note: "审核通过" },
  ],
  t4: [
    {
      id: 1,
      period: "2025-01",
      metric: "高企引进储备",
      amount: "4 家",
      note: "意向企业",
    },
  ],
  t5: [
    { id: 1, period: "2025-01", metric: "高企申报", amount: "3 家", note: "本月申报" },
  ],
  t6: [
    {
      id: 1,
      period: "2025-01",
      metric: "高企迁址量",
      amount: "1 家",
      note: "直接为高企迁入",
    },
  ],
  t7: [
    { id: 1, period: "2025-01", metric: "高企获批", amount: "2 家", note: "本月获批" },
  ],
  g1: [
    {
      id: 1,
      period: "2025-年度",
      metric: "去化目标",
      amount: "50,000 m²",
      note: "年度指标",
    },
  ],
});

// 选中类目
function selectCategory(key) {
  activeCategory.value = key;
  // 自动把第一个看板设为选中
  const cat = categories.find((c) => c.key === key);
  if (cat && cat.items && cat.items.length) {
    selectedBoardId.value = cat.items[0].id;
  } else {
    selectedBoardId.value = null;
  }
}

// 选中看板
function selectBoard(id) {
  selectedBoardId.value = id;
}

// 根据选中看板读取列表数据
const listData = computed(() => {
  return listDataMap[selectedBoardId.value] || [];
});

function handleFilter() {
  // 目前筛选逻辑基于 computed filteredListData，因此只需触发响应式更新（已经自动生效）
}

function resetFilter() {
  filterParams.zt = "";
  filterParams.month = getCurrentMonthForFilter();
}

// 如果切换类目，保证选中看板存在（watch 已被上面 selectCategory 处理，但做兜底）
watch(currentCategory, (n) => {
  if (!n.items.find((i) => i.id === selectedBoardId.value)) {
    selectedBoardId.value = n.items.length ? n.items[0].id : null;
  }
});
</script>

<style scoped>
.page {
  padding: 20px;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color: #333;
}
.title {
  margin: 0 0 12px;
  font-size: 18px;
}
.tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.tab-btn {
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid #e6e6e6;
  background: #fafafa;
  cursor: pointer;
  font-size: 14px;
}
.tab-btn.active {
  background: linear-gradient(90deg, #4f9ef5, #3a7ef0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 6px rgba(64, 127, 255, 0.18);
}
.boards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.board {
  padding: 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #eee;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 92px;
}
.board:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 16px rgba(46, 61, 91, 0.06);
}
.board.selected {
  border-color: #3a7ef0;
  box-shadow: 0 8px 24px rgba(58, 126, 240, 0.14);
  transform: translateY(-6px);
}
.board-top {
  display: flex;
  flex-direction: column;
}
.board-title {
  font-weight: 600;
  font-size: 14px;
  color: #222;
}
.board-sub {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
}
.board-value {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.value {
  font-size: 18px;
  font-weight: 700;
  color: #111;
}
.unit {
  color: #666;
  font-size: 12px;
}

.list-area {
  margin-top: 10px;
  background: #fff;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #eee;
}
.list-title {
  margin: 0 0 10px;
  font-size: 16px;
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  padding: 8px;
  background: #fafafa;
  border-bottom: 1px solid #eef0f2;
  font-weight: 600;
}
.data-table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.empty {
  padding: 16px;
  color: #999;
  text-align: center;
}
</style>
